<template>
  <el-dialog
    model-value="collectDialogVisible"
    title="选择对应的收藏位置"
    width="600"
    :before-close="handleClose"
  >
    <div class="content">
      <div class="content-top">
        <h3>当前选中： {{ collectOneName }}——{{ collectTwoName }}</h3>
      </div>
      <div class="content-bottom">
        <div class="content-bottom-left">
          <div class="title">
            <span>{{openJson.name}}</span>
          </div>
          <div class="list">
            <ul>
              <li v-for="item in openJson.sonCollect" :key="item.id"  @click="handleClickOpen(item)">{{item.title}}</li>
            </ul>
          </div>
        </div>
        <div class="content-bottom-right">
          <div class="title">
            <span>{{privacyJson.name}}</span>
            <span @click="unlock()">解锁</span>
          </div>
          <div class="list">
            <ul>
              <li v-for="item in privacyJson.sonCollect" :key="item.id" @click="handleClickPrivacy(item)">{{item.title}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClickCancel">取消</el-button>
        <el-button type="primary" @click="handleClickConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineEmits, reactive, defineProps } from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import {collectApi} from '@/api/collect.js'

//### 声明事件 ###
const emit = defineEmits(['close-Cdialog'])

//### 变量定义 ###
//文章收藏提交对象
const articleCollectForm = reactive({
  "articleId": -1, 
  "oneDirName": "", 
  "twoDirName": ""
})

const articleId = defineProps(['articleId'])  //获取父组件传递的文章id

const openJson = reactive({
  name: "我的收藏夹",
  sonCollect: [
    {id: 1, title: '默认收藏夹'},
    {id: 2, title: '程序员学习资料'}
  ]
})
const privacyJson = reactive({
  name: "加密收藏夹",
  sonCollect: [
    {id: 1, title: ""}
  ]
})
const collectOneName = ref('我的收藏夹'); //一级显示名
const collectTwoName = ref('默认收藏夹'); //二级显示名
const isUnlock = ref(false);  //是否解锁过

//### 方法定义 ###
//页面初始化方法
const pageInitialization = async () => {
  const result = await collectApi.getSecondLevelCollectListByName({"oneDirName":openJson.name});
  if(result.code === 200) {
    openJson.sonCollect = result.data.secondLevelCollectList;
  }
}

pageInitialization();

//以下是内部逻辑方法
const handleClickOpen = (item:any) => { //选中我的收藏夹中的内容
  collectOneName.value = openJson.name;
  collectTwoName.value = item.title;
}

const unlock = async () => {  //解锁加密收藏夹并获取其中包括的数据
  if(isUnlock.value) {
    ElMessage({
      type: 'success',
      message: `已经解锁过，选中对应收藏目录即可。`,
    })
    return;
  }
  ElMessageBox.prompt('请输入解锁密码', '解锁弹窗', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern:
      /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{16}$/,
    inputErrorMessage: '16位密码, 包含大小写字母、数字、特殊字符',
    inputType: "password"
  })
    .then(async ({ value }) => {
      const result = await collectApi.validatePassword({"enterPassword":value});
      console.log("验证密码的结果", result);
      if(result.code === 200) {
        ElMessage({
          type: 'success',
          message: `密码正确`,
        })
        privacyJson.sonCollect = result.data.secondLevelCollectList;
        isUnlock.value = true;

      }else {
        ElMessage({
          type: 'warning',
          message: result.msg,
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const handleClickPrivacy = (item:any) => {  //选中隐私收藏夹中的内容
  collectOneName.value = privacyJson.name;
  collectTwoName.value = item.title;
}

//以下是对应弹窗点击方法
//取消按钮监听方法
const handleClickCancel = () => {
  emit('close-Cdialog', -1);
}

//提交按钮监听方法
const handleClickConfirm = async () => {
  console.log("看看收藏获取的文章id", articleId.articleId);
  articleCollectForm.articleId = articleId.articleId;
  articleCollectForm.oneDirName = collectOneName.value;
  articleCollectForm.twoDirName = collectTwoName.value;

  const result = await collectApi.addToCollectionRecord(articleCollectForm);
  if(result.code === 200) {
    emit('close-Cdialog', result.data.collectNum);  //返回需要更新的收藏数量
  }else {
    ElMessage({
      type: 'info',
      message: result.data.message,
    })
    emit('close-Cdialog', -1);
  }
}

const handleClose = (done: () => void) => {
  handleClickCancel();  //直接调用取消方法
}
</script>

<style lang="scss" scoped>
.content {
  // background: red;
  display: flex;
  flex-direction: column;

  .content-top {
    margin-bottom: 20px;

    h3 {
      text-align: center;
      font-weight: bold;
      color: #409EFF;
    }
  }

  .content-bottom {
    display: flex;

    .content-bottom-left {
      // background: green;
      flex: 0.5;
      box-shadow: 0 4px 8px 0 var(--border-shadow-color), 0 6px 20px 0 var(--border-shadow-color);
      padding: 6px;
      margin-right: 20px;

      .title {
        border-bottom: 1px solid #111528;

        span {
          font-weight: bold;
        }
      }

      .list {
        ul {
          list-style-type: none;  /* 完全移除项目符号 */
          padding-left: 0;       /* 可选：同时移除默认的左缩进 */

          li {
            margin-top: 3px;
          }
        }
      }
    }

    .content-bottom-right {
      // background: greenyellow;
      flex: 0.5;
      box-shadow: 0 4px 8px 0 var(--border-shadow-color), 0 6px 20px 0 var(--border-shadow-color);
      padding: 6px;

      .title {
        border-bottom: 1px solid #111528;
        display: flex;
        justify-content: space-between; /* 使子项在主轴上两端分布 */

        span {
          font-weight: bold;
        }
      }

      .list {
        ul {
          list-style-type: none;  /* 完全移除项目符号 */
          padding-left: 0;       /* 可选：同时移除默认的左缩进 */
        }

        li {
          margin-top: 3px;
        }
      }
    }
  }
}
</style>
